<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单的轮播图</title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.banner{
				width: 590px;
				height: 340px;
				position: relative;
				margin: 30px auto;
				overflow: hidden;
			}
			.banner .banner_img_a{
				position: absolute;
			}
			.banner img{
				width: 590px;
				height: 340px;
			}
			
			/* 处理指示器 */
			.banner .indicator{
				position: absolute;
				left: 10px;
				bottom: 10px;
				color: white;
			}
			.banner .indicator span{
				cursor: pointer;
				background-color: #999999;
				padding: 2.5px 8px;
				
			}
			.banner .indicator span.cur{
				border: 2px solid #FFA500;
			}
			.banner .page{
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			.banner .page span{
				color: white;
				cursor: pointer;
				background-color: #999999;
				padding: 2.5px 8px;
			}
			.banner .page span:hover{
				border: 2px solid #FFA500;
			}
			
		</style>
	</head>
	<body>
		
		<div class="banner">
			<a href="#" class="banner_img_a"><img src="https://img12.360buyimg.com/da/jfs/t4669/318/1071217994/65085/7ffa280e/58d8684cN5d6bb618.jpg" alt="" /></a>
			<a style="display: none;" href="#" class="banner_img_a"><img src="https://img1.360buyimg.com/da/jfs/t4276/112/2593909401/45205/8ba64627/58d3ed4aN87850ee5.jpg" alt="" /></a>
			<a style="display: none;" href="#" class="banner_img_a"><img src="https://img1.360buyimg.com/da/jfs/t4294/191/2598171164/87392/f806eb9f/58d3a189N6a0bf000.jpg" alt="" /></a>
			<a style="display: none;" href="#" class="banner_img_a"><img src="https://img12.360buyimg.com/da/jfs/t4240/134/2989786319/69140/67758b26/58d88ac6N40160b3c.jpg" alt="" /></a>
			<a style="display: none;" href="#" class="banner_img_a"><img src="https://img1.360buyimg.com/da/jfs/t4333/257/2387870521/139391/12c8274b/58d0f2d8N8ccc9fd3.jpg" alt="" /></a>
		
			<div class="indicator">
				<span class="cur">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</div>
		
			<div class="page">
				<span class="prev">&lt;</span>
				<span class="next">&gt;</span>
			</div>
		
		</div>
		
		
	</body>
</html>

<script type="text/javascript">
	// 
	var index = 0;
	var last = 0;
	// 获取上一张的index是多少
	function getIndexPrev(){
		return index <= 0 ? $('.banner .banner_img_a').length-1:index-1;
	}
	// 获取下一张的index是多少
	function getIndexNext(){
		return index >= $('.banner .banner_img_a').length-1 ? 0:index+1;
	}
	
	// 封装一个下一张的方法
	function showNextImage(){
		index = getIndexNext();
		$(".banner .banner_img_a").eq(last).css({
			//显示在屏幕上
			left: 0,
		}).finish().show().animate({
			// 让其动画移走
			left: -590,
		},1500,function(){
			$(this).hide().css({
				// 将位置改到最后面,然后隐藏
				left: 590,
			});
		});
		$(".banner .banner_img_a").eq(index).css({
			left: 590,
		}).finish().show().animate({
			left: 0,
		},1500);
		$(".banner .indicator span").removeClass("cur");
		$(".banner .indicator span").eq(index).addClass("cur");
		last = index;
	}
	
	
	
	
	
	// 上一张的方法
	function showPrevImage(){
		index = getIndexPrev();
		
		$('.banner .banner_img_a').eq(last).css({
			// 显示在屏幕上
			left: 0,
		}).finish().show().animate({
			// 让其动画移动位置
			left: 590,
		},1500);
		
		$('.banner .banner_img_a').eq(index).css({
		left: -590,
		}).finish().show().animate({
		left:0
		},1500);
		$('.banner .indicator span').removeClass('cur');
		$('.banner .indicator span').eq(index).addClass('cur');
		last = index;
		
	}
	// 执行动画的定时器
	var timer = setInterval(showPrevImage,2000);
	
	// 找到上一张和下一张按钮的点击事件
	$('.banner .page .prev').click(function(){
		showPrevImage();
	});
	$('.banner .page .next').click(function(){
		showNextImage();
	});
	// 当鼠标移动到按钮上的时候要移除定时器,鼠标移开的时候开启定时器
	$('.banner .page span').hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(showPrevImage,2000);
	});
	
	$('.banner .indicator span').hover(function(){
		clearInterval(timer);
		index = $('.banner .indicator span').index(this) - 1;
		if(index == last - 1)
		{
			console.log("又进来了"+ index +"-----" + last)
			return;
		}
		showNextImage();
		
	},function(){
		timer = setInterval(showPrevImage,2000);
	});
	
	
</script>




